import React, { Component } from 'react'
import { Table, Button, Popconfirm, message } from 'antd'
import axios from 'axios'
import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
import 'react-photo-view/dist/index.css';

export default class Feedback extends Component {
    state = {
        showAddUserDialog: false,//显示添加用户的对话框
        showEditUserDialog: false,//显示修改的对话框
        editUserRow: null,//当前编辑的用户信息
        deleteArr: [],
        userlist: [],
        columns: [{ key: 'feedback_id', title: '编号', dataIndex: 'feedback_id',width:80,align:'center' },
        { title: '用户id', dataIndex: 'user_id',width:80,align:'center'  },
        { title: '内容', dataIndex: 'feedback',width:200,align:'center' },
        { title: '反馈类型', dataIndex: 'feedback_type_id',width:120,align:'center' },
        { title: '反馈图片', dataIndex: 'feedback_img',width:100,align:'center',
         render: (text) => {
             if(!text) return '无图片'
            return (
                <>
                <PhotoProvider>
                        <PhotoConsumer src={text} >
                        <img src={text} alt="" style={{width:'50px',height:'50px'}}/>
                        </PhotoConsumer>
                </PhotoProvider>
              </>
            )
        } },
        { title: '电话', dataIndex: 'feedback_number',width:150,align:'center'  },
        {
            title: '编辑', dataIndex: 'del',
            render: (del, row) => {
                return (
                    <div >
                        <Popconfirm
                            onConfirm={() => { this.deleteUser(row.feedback_id) }}
                            onText='确认'
                            cancelText='取消'
                            title="您确认要删除吗"
                        >
                            <Button style={{ width: '60px' }} type="danger" >删除</Button>
                        </Popconfirm>
                    </div>
                )
            }
        }]
    }



    componentDidMount() {
        const token = localStorage.getItem('token');
        if (token) {

            axios.get('https://wx.xxmtcds.top:2333/admin/feedback', {
                headers: { 'authorization': `${token}` }
            })
                .then(res => {
                    // console.log(res);
                    this.setState({ userlist: res.data })
                })
                .catch(error => {
                    console.log(error);
                })
        }
    }

   

    //多选删除
    deletelist = () => {
        const { deleteArr, userlist } = this.state;
        let idArr = [];
        let newlist = userlist;
        console.log(deleteArr, newlist);
        for (let i = 0; i < deleteArr.length; i++) {
            newlist = newlist.filter(item => item.feedback_id !== deleteArr[i].feedback_id);
        }
        // console.log(idArr);//剩余的
        for (let i = 0; i < deleteArr.length; i++) {
            idArr.push(deleteArr[i].feedback_id);
        }
        console.log(idArr);

        const token = localStorage.getItem('token');
        if (token) {
            console.log(token);

            axios({
                method: 'delete',
                url: 'https://wx.xxmtcds.top:2333/admin/feedback',
                data: {
                    isRows: true,
                    idArr: idArr
                },
                headers: { 'authorization': `${token}` }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(err => console.log(err))
        }
        this.setState({ userlist: newlist });

    }



    //行删除
    deleteUser = (adminid) => {
        
        const { userlist } = this.state;
        let templist = userlist;
        templist = templist.filter((item) => item.feedback_id != adminid)

        const token = localStorage.getItem('token');
        if (token) {
            axios({
                method: 'delete',
                url: 'https://wx.xxmtcds.top:2333/admin/feedback',
                data: {
                    isRows: false,
                    id: adminid
                },
                headers: { 'authorization': `${token}` }
            })
                .then(function (response) {
                    // console.log(response);
                })
                .catch(err => console.log(err))
        }

        this.setState({ userlist: templist });
    }


    hideAddUserDialog = () => {
        this.setState({ showAddUserDialog: false });
    }
    hideEditUserDialog = () => {
        this.setState({ showEditUserDialog: false });
    }
    userRowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            // console.log(selectedRows);
            this.setState({ deleteArr: selectedRows });//主码
        }
    }

    adduser = (e) => {
        //    console.log(e)
        this.setState({ userlist: [...this.state.userlist, e] });
        //    console.log(this.state.userlist);
    }




    render() {
        return (
            <div>
                <Popconfirm
                    onConfirm={this.deletelist}
                    onText='确认'
                    cancelText='取消'
                    title="您确认要删除吗"
                >
                 <Button type="danger">删除</Button>
                </Popconfirm>
                <Table
                    bordered
                    style={{ backgroundColor: '#FEFEFE' }}
                    dataSource={this.state.userlist}
                    columns={this.state.columns}
                    rowSelection={this.userRowSelection}//多选框
                    rowKey='feedback_id'//主键
                    pagination={{ pageSize: 3 }}
                ></Table>
               
            </div>
        );
    }
}

